<template>
  <div class="content-wrap">
    <van-nav-bar title="详细信息" left-arrow @click-left="$router.go(-1)">
      <van-icon name="ellipsis" slot="right" v-if="friendDetail.isFriends"
                @click="$router.push({name: 'friendSetting', params: {id: $route.params.id}})"/>
    </van-nav-bar>
    <div class="top-wrap clickable">
      <div class="avatar">
        <img :src="friendDetail.icon" class="avatar-img">
      </div>
      <div class="content">
        <p class="name" v-if="friendDetail.nick">{{friendDetail.nick}}</p>
        <p class="desc">密聊号：{{friendDetail.username}}</p>
        <p class="desc">昵称：{{friendDetail.nickname || '昵称未设置'}}</p>
      </div>
    </div>

    <van-cell-group title="" class="group-cell" v-if="friendDetail.isFriends">
      <van-cell title="设置备注" is-link clickable :to="{name: 'setRemarks', params: {id: $route.params.id}}"/>
    </van-cell-group>

    <van-cell-group title="" class="group-cell">
      <van-cell title="性别" :value="sexList[friendDetail.sex]" clickable/>
      <van-cell title="地区" :value="friendDetail.area || '未设置'" clickable/>
    </van-cell-group>

    <div class="btn-wrap">
      <van-button type="primary" size="normal" block :to="{name: 'chat', params: {id: $route.params.id}}"
                  v-if="friendDetail.isFriends">发送信息
      </van-button>
      <van-button type="primary" size="normal" block v-else @click="addFriend">添加好友</van-button>
    </div>

    <van-popup
      v-model="authAddFriendShow"
      position="bottom"
      :style="{ height: '100%' }"
      class="red-packet"
    >
      <van-nav-bar title="朋友验证" left-text="取消" right-text="完成"
                   @click-left="authAddFriendShow = false" @click-right="sendAuth">
      </van-nav-bar>

      <van-cell-group title="你需要发送验证申请，等对方通过">
        <van-field v-model="authMessage" placeholder="请输入验证信息"/>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
  import Socket from '../../utils/socket'
  import { mapState } from 'vuex'

  export default {
    name: 'friendDetail',
    data () {
      return {
        sexList: {
          '1': '男',
          '2': '女',
          '3': '保密'
        },
        authAddFriendShow: false,
        authMessage: ''
      }
    },
    computed: {
      ...mapState({
        friendDetail: state => state.friend.friendDetail,
        userData: state => state.user.userData
      })
    },
    methods: {
      addFriend () {
        Socket.sendData('FriendsCheck', { username: this.friendDetail.username }).then((res) => {
          if (res.action !== 20005) {
            return
          }
          if (this.friendDetail.OnFAdd !== 1) {
            this.$dialog.alert({
              message: '添加成功'
            }).then(() => {
              this.$router.push({ name: 'chat', params: { id: this.friendDetail.uid } })
            })
          } else {
            this.authAddFriendShow = true
          }
        })
      },
      sendAuth () {
        Socket.sendData('FriendsCheck', {
          username: this.friendDetail.username,
          content: this.authMessage
        }).then(res => {
          if (res.action === 20005) {
            if (res.msg === 'ok') {
              this.authAddFriendShow = false
            } else {
              this.$toast(res.msg)
            }
          }
        })
      },
      getDetail () {
        Socket.sendData('getFriendsInfo', { fid: this.$route.params.id }).then(res => {
          if (res.action === 20002) {
            let obj = Object.assign(res.data, { isFriends: true })
            Socket.setStoreList('setDetail', { info: obj, type: 'friendDetail' })
          }
        })
      }
    },
    created () {
      this.authMessage = '我是' + this.userData.nickname
      if (this.$route.params.id) {
        this.getDetail() // 已经是好友的情况下看详情
      }
    }
  }
</script>

<style scoped lang="scss">
  .top-wrap {
    display: flex;
    align-items: center;
    padding: .14rem .2rem;
    background: #fff;
    margin-top: .3rem;

    .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.2rem;
      height: 1.2rem;
      background: #e7eaec;
      border-radius: 50%;
      font-size: .32rem;
      font-weight: bold;
      color: #6b7294;
      overflow: hidden;
      margin-right: .2rem;

      .avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .content {
      .name {
        font-size: .3rem;
        color: #333;
        margin-bottom: .14rem;
      }

      .desc {
        color: #999;
        font-size: .26rem;
        line-height: 1.3;
      }
    }
  }

  .group-cell {
    margin-top: .3rem;
  }

  .btn-wrap {
    padding: .3rem;
  }
</style>
